import React, { useEffect, useState } from 'react'

type TypeFileListProps = {
  list: {
    fileName: string
    fileUrl: string
  }[]
  setList: React.Dispatch<React.SetStateAction<TypeFileListProps['list']>>
}
export default function SerachFilePage(): React.JSX.Element {
  const [videoList, setVideoList] = useState<TypeFileListProps['list']>([])
  const [audioList, setAudioList] = useState<TypeFileListProps['list']>([])

  // 获取文件列表
  useEffect(() => {
    window.electron.ipcRenderer.invoke('get:file:list').then((args) => {
      const { videoList, audioList } = args
      setVideoList(videoList)
      setAudioList(audioList)
    })
  }, [])
  return (
    <div className="container">
      <div className="w-full h-full p-[10px]">
        <div className="tabs tabs-border">
          <input type="radio" name="my_tabs_2" className="tab" aria-label="视频" defaultChecked />
          <div className="tab-content border-base-300 bg-base-100 p-10">
            <FileList list={videoList} setList={setVideoList} />
          </div>
          <input type="radio" name="my_tabs_2" className="tab" aria-label="录音" />
          <div className="tab-content border-base-300 bg-base-100 p-10">
            <FileList list={audioList} setList={setAudioList} />
          </div>
        </div>
      </div>
    </div>
  )
}

function FileList({ list, setList }: TypeFileListProps): React.JSX.Element {
  const [originalList, setOriginalList] = useState<TypeFileListProps['list']>([])
  const handleInputChange = (e) => {
    console.log(e.target.value)
    if (e.target.value === '') {
      setOriginalList(list)
    } else {
      setOriginalList(list.filter((item) => item.fileName.includes(e.target.value)))
    }
  }

  useEffect(() => {
    setOriginalList(list)
  }, [list])
  const handleRemoveFile = (_, item) => {
    const { fileUrl } = item
    // 删除文件
    window.electron.ipcRenderer.invoke('remove:file', fileUrl).then((res) => {
      if (res) {
        // 删除成功
        setList((p) => p.filter((item) => item.fileUrl !== fileUrl))
      }
    })
  }

  const handleOpenFile = (_, item) => {
    const { fileUrl } = item
    // 打开文件
    window.electron.ipcRenderer.send('open:file', fileUrl)
  }
  return (
    <ul className="list bg-base-100 rounded-box shadow-md mt-[10px]">
      <li className="p-[4px] pb-[5px] text-center">
        <label className="input">
          <svg
            className="h-[1em] opacity-50"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
          >
            <g
              strokeLinejoin="round"
              strokeLinecap="round"
              strokeWidth="2.5"
              fill="none"
              stroke="currentColor"
            >
              <circle cx="11" cy="11" r="8"></circle>
              <path d="m21 21-4.3-4.3"></path>
            </g>
          </svg>
          <input type="search" className="grow" placeholder="Search" onChange={handleInputChange} />
        </label>
      </li>
      <div className="overflow-auto h-[320px]">
        {originalList.map((item, index) => (
          <li className="list-row" key={index}>
            <div></div>
            <div>
              <div>{item.fileName}</div>
              <div className="text-xs uppercase font-semibold opacity-60">{item.fileUrl}</div>
            </div>
            <button className="btn btn-square btn-ghost" onClick={(e) => handleRemoveFile(e, item)}>
              <svg
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                width="17"
                height="17"
                fill="#eee"
              >
                <path d="M683.514192 1023.999519H340.485808A154.527713 154.527713 0 0 1 186.336081 884.785983L129.317406 325.755552a39.082648 39.082648 0 0 1 77.762111-7.937715l57.053038 559.030431a76.559427 76.559427 0 0 0 76.376161 68.976791h343.005476a76.559427 76.559427 0 0 0 76.376161-68.976791l57.053038-559.030431a39.082648 39.082648 0 1 1 77.762112 7.937715l-57.053039 559.030431A154.516259 154.516259 0 0 1 683.514192 1023.999519zM888.85244 191.513109h-753.681972a39.092957 39.092957 0 0 1 0-78.17446h753.681972a39.092957 39.092957 0 0 1 0 78.17446z"></path>
                <path d="M409.199153 704.887365a39.092957 39.092957 0 0 1-39.081502-39.081503V451.991555a39.092957 39.092957 0 0 1 78.174459 0v213.814307a39.092957 39.092957 0 0 1-39.092957 39.081503zM614.789392 704.887365a39.092957 39.092957 0 0 1-39.081502-39.081503V451.991555a39.092957 39.092957 0 0 1 78.174459 0v213.814307a39.092957 39.092957 0 0 1-39.092957 39.081503zM667.844938 171.960904a39.081503 39.081503 0 0 1-39.127319-39.081503 54.773666 54.773666 0 0 0-54.716395-54.716395h-124.048264a54.773666 54.773666 0 0 0-54.716395 54.716395 39.081503 39.081503 0 1 1-78.163006 0 133.028304 133.028304 0 0 1 132.867947-132.867947H574.04704a133.028304 133.028304 0 0 1 132.867947 132.867947 39.070049 39.070049 0 0 1-39.070049 39.081503z"></path>
              </svg>
            </button>
            <button className="btn btn-square btn-ghost" onClick={(e) => handleOpenFile(e, item)}>
              <svg
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                width="19"
                height="19"
                fill="#eee"
              >
                <path d="M512 195.047619c150.79619 0 288.280381 92.013714 412.42819 276.041143a73.142857 73.142857 0 0 1 2.755048 77.385143l-2.755048 4.437333-6.92419 10.118095C795.184762 740.303238 659.992381 828.952381 512 828.952381c-150.79619 0-288.280381-92.013714-412.42819-276.041143a73.142857 73.142857 0 0 1-2.755048-77.385143l2.755048-4.437333 6.92419-10.118095C228.815238 283.696762 364.007619 195.047619 512 195.047619z m0 73.142857c-120.880762 0-235.471238 75.142095-345.088 234.008381L160.207238 512l6.729143 9.825524C276.650667 680.740571 391.216762 755.809524 512 755.809524c120.880762 0 235.471238-75.142095 345.088-234.008381l6.704762-9.801143-6.729143-9.825524C747.349333 343.259429 632.783238 268.190476 512 268.190476z m0 88.551619a161.694476 161.694476 0 1 1 0 323.364572 161.694476 161.694476 0 0 1 0-323.364572z m0 73.142857a88.551619 88.551619 0 1 0 0 177.078858 88.551619 88.551619 0 0 0 0-177.078858z"></path>
              </svg>
            </button>
          </li>
        ))}
      </div>
    </ul>
  )
}
